React useRef: A változtatható értékek tárolási mintáinak elsajátítása

A useRef egy hatékony hook a Reactben, amely lehetővé teszi az értékek megőrzését a renderelések között anélkül, hogy újrarenderelést okozna, amikor ezek az értékek megváltoznak. Gyakran a DOM-elemek közvetlen elérésével hozzák összefüggésbe, de képességei messze túlmutatnak ezen. Ez az átfogó útmutató bemutatja a useRef változatos felhasználási eseteit, hogy Ön hatékonyabb és karbantarthatóbb React kódot írhasson.

A useRef megértése: Több mint csak DOM-hozzáférés

Lényegében a useRef egy változtatható ref objektumot ad vissza, amelynek .current tulajdonsága a megadott argumentummal (initialValue) inicializálódik. A visszaadott objektum a komponens teljes élettartama alatt megmarad. Kulcsfontosságú, hogy a .current tulajdonság módosítása nem vált ki újrarenderelést. Ez a legfőbb különbség a useRef és a useState között.

Bár a DOM-elemek elérése egy gyakori felhasználási eset, a useRef kiválóan alkalmas bármilyen olyan változtatható érték kezelésére, amelynek frissítésekor nem szükséges újrarenderelést kiváltani. Ez felbecsülhetetlen értékűvé teszi olyan feladatokhoz, mint:

• Korábbi prop vagy állapotértékek tárolása.
• Számlálók vagy időzítők fenntartása.
• A fókusz állapotának követése újrarenderelés nélkül.
• Bármilyen változtatható érték tárolása, amelynek meg kell maradnia a renderelések között.

Alapvető használat: DOM-elemek elérése

A legismertebb felhasználási eset a DOM-elemek közvetlen elérése. Ez olyan esetekben hasznos, amikor imperatív módon kell interakcióba lépni egy DOM-csomóponttal, például egy beviteli mező fókuszálása, méreteinek mérése vagy animációk indítása.

Példa: Beviteli mező fókuszálása

Így használhatja a useRef-et egy beviteli mező fókuszálására, amikor egy komponens beillesztődik a DOM-ba (mount):

            import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    // Focus the input field on mount
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []); // Empty dependency array ensures this runs only once on mount

  return (
    <input type="text" ref={inputRef} placeholder="Enter text" />
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Magyarázat:

1. Létrehozunk egy ref-et a useRef(null) segítségével. A kezdeti érték null, mivel a beviteli elem még nem létezik, amikor a komponens először renderelődik.
2. Hozzárendeljük a ref-et a beviteli elemhez a ref prop segítségével: ref={inputRef}. A React automatikusan beállítja az inputRef.current értékét a DOM-csomópontra, amikor a beviteli elem beillesztődik.
3. A useEffect-et egy üres függőségi tömbbel ([]) használjuk, hogy biztosítsuk, az effekt csak egyszer fusson le a komponens beillesztése után.
4. Az effektben ellenőrizzük, hogy létezik-e az inputRef.current (hogy elkerüljük a hibákat, ha az elem még nem elérhető), majd meghívjuk az inputRef.current.focus()-t a beviteli mező fókuszálásához.

A DOM-hozzáférésen túl: Változtatható értékek kezelése

A useRef valódi ereje abban rejlik, hogy képes tárolni olyan változtatható értékeket, amelyek megmaradnak a renderelések között anélkül, hogy újrarenderelést váltanának ki. Ez számos lehetőséget nyit a komponensek viselkedésének optimalizálására és az állapot kezelésére a funkcionális komponensekben.

Példa: Korábbi prop vagy állapotértékek tárolása

Néha szükség van egy prop vagy állapotváltozó előző értékének elérésére. A useRef tiszta módot biztosít erre anélkül, hogy felesleges újrarendereléseket váltana ki.

            import React, { useRef, useEffect } from 'react';

function MyComponent({ value }) {
  const previousValue = useRef(value);

  useEffect(() => {
    // Update the ref's .current property with the current value
    previousValue.current = value;
  }, [value]); // Effect runs whenever the 'value' prop changes

  // Now you can access the previous value using previousValue.current
  return (
    <div>
      Current value: {value}
      <br />
      Previous value: {previousValue.current}
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Magyarázat:

1. Inicializáljuk a previousValue ref-et a value prop kezdeti értékével.
2. A useEffect segítségével frissítjük a previousValue.current tulajdonságot, amikor a value prop megváltozik.
3. A komponensen belül most már hozzáférhetünk a value prop előző értékéhez a previousValue.current segítségével.

Felhasználási példa: Változások követése API-válaszokban (Nemzetközi forgatókönyv)

Képzelje el, hogy egy műszerfalat készít, amely egy API-ból lekért valutaárfolyamokat jelenít meg. Az API különböző formátumokban vagy változó pontossággal adhatja vissza az árfolyamokat az adatforrástól függően (pl. egy Európai Központi Bank API-ja szemben egy délkelet-ázsiai pénzügyi intézmény API-jával). A useRef segítségével nyomon követheti az előző árfolyamot, és egy vizuális jelzővel (pl. zöld felfelé mutató nyíl vagy piros lefelé mutató nyíl) jelezheti, hogy az árfolyam nőtt vagy csökkent-e az utolsó frissítés óta. Ez kulcsfontosságú a nemzetközi felhasználók számára, akik pénzügyi döntéseikhez támaszkodnak ezekre az árfolyamokra.

Példa: Számlálók vagy időzítők fenntartása

A useRef tökéletes olyan számlálók vagy időzítők kezelésére, amelyeknek nem kell újrarenderelést kiváltaniuk. Például használhatja egy gombkattintások számának követésére vagy egy egyszerű időzítő implementálására.

            import React, { useRef, useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const clickCount = useRef(0); // Initialize the ref with 0

  const handleClick = () => {
    clickCount.current++; // Increment the ref's .current property
    setCount(clickCount.current); //Increment state which re-renders.
  };

  return (
    <div>
      <p>Button clicked: {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Magyarázat:

1. Inicializálunk egy clickCount nevű ref-et 0 értékkel.
2. A handleClick függvényben növeljük a clickCount.current tulajdonságot. Ez nem vált ki újrarenderelést.
3. Frissítjük a 'count' állapotot is, ami újrarenderelést vált ki.

Példa: Debounce funkció implementálása

A "debouncing" egy technika, amellyel korlátozható egy függvény végrehajtásának gyakorisága. Gyakran használják keresési beviteli mezőkben, hogy megakadályozzák a túlzott API-hívásokat, miközben a felhasználó gépel. A useRef használható a debounce funkcióban használt időzítő azonosítójának (timer ID) tárolására.

            import React, { useState, useRef, useEffect } from 'react';

function MyComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);
  const timerRef = useRef(null); // Store the timer ID

  const handleChange = (event) => {
    const newSearchTerm = event.target.value;
    setSearchTerm(newSearchTerm);

    // Clear the previous timer if it exists
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }

    // Set a new timer
    timerRef.current = setTimeout(() => {
      // Simulate an API call
      fetch(`https://api.example.com/search?q=${newSearchTerm}`)
        .then(response => response.json())
        .then(data => setResults(data.results));
    }, 300); // Debounce for 300 milliseconds
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        {results.map(result => (
          <li key={result.id}>{result.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Magyarázat:

1. A useRef segítségével tároljuk az időzítő azonosítóját a timerRef-ben.
2. A handleChange függvényben töröljük az előző időzítőt (ha létezik) a clearTimeout(timerRef.current) segítségével.
3. Ezután beállítunk egy új időzítőt a setTimeout segítségével, és az időzítő azonosítóját a timerRef.current-ben tároljuk.
4. Az API-hívás csak akkor történik meg, ha a felhasználó 300 ezredmásodpercig nem gépel.

Nemzetköziesítési megfontolások: Amikor olyan API-hívásokkal valósít meg "debouncing"-ot, amelyek különböző nyelveken jelenítenek meg információkat, győződjön meg arról, hogy az API támogatja a nemzetköziesítést, és a felhasználó preferált nyelvén adja vissza az adatokat. Fontolja meg az Accept-Language fejléc használatát az API-kérésekben.

Példa: A fókusz állapotának követése újrarenderelés nélkül

A useRef segítségével nyomon követheti, hogy egy elem fókuszban van-e, anélkül, hogy újrarenderelést okozna. Ez hasznos lehet az elemek fókuszállapotuk alapján történő stílusozásához vagy egyedi fókuszkezelési logika implementálásához.

            import React, { useRef, useState } from 'react';

function MyComponent() {
  const [isFocused, setIsFocused] = useState(false);
  const inputRef = useRef(null);

  const handleFocus = () => {
    setIsFocused(true);
  };

  const handleBlur = () => {
    setIsFocused(false);
  };

  return (
    <div>
      <input
        type="text"
        ref={inputRef}
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
      <p>Input is focused: {isFocused ? 'Yes' : 'No'}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

useRef vs. useState: A megfelelő eszköz kiválasztása

Fontos megérteni a legfőbb különbségeket a useRef és a useState között, hogy a feladathoz megfelelő eszközt válasszuk.

Bevált gyakorlatok és gyakori buktatók

• Ne módosítsa közvetlenül az állapotot: Bár a useRef lehetővé teszi az értékek közvetlen módosítását, kerülje a useState által kezelt állapotváltozók közvetlen módosítását. Mindig a useState által biztosított beállító (setter) függvényt használja az állapot frissítésére.
• Legyen tekintettel a mellékhatásokra: Amikor a useRef-et a felhasználói felületet befolyásoló értékek kezelésére használja, legyen tekintettel a lehetséges mellékhatásokra. Győződjön meg arról, hogy a kódja kiszámíthatóan viselkedik, és nem okoz váratlan hibákat.
• Ne támaszkodjon a useRef-re a renderelési logikában: Mivel a useRef változásai nem váltanak ki újrarenderelést, ne támaszkodjon közvetlenül az értékeire annak meghatározásához, hogy mit kell renderelni. Használja a useState-et olyan értékekhez, amelyeknek a renderelési logikát kell vezérelniük.
• Vegye figyelembe a teljesítményre gyakorolt hatásokat: Bár a useRef segíthet a teljesítmény optimalizálásában a felesleges újrarenderelések megakadályozásával, legyen tisztában azzal, hogy a változtatható értékek túlzott használata megnehezítheti a kód megértését és hibakeresését.

Haladó felhasználási esetek és minták

Értékek megőrzése komponens példányok között

Míg a `useRef` egy *egyetlen* komponens példány renderelései között őrzi meg az értékeket, néha szükség van arra, hogy egy érték a ugyanazon komponens *különböző* példányai között is megmaradjon. Ez egy kissé más megközelítést igényel, gyakran egy modul szintű változó és a `useRef` kombinációját használva.

            // myComponent.js
let globalCounter = 0; // Module-level variable

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const counterRef = useRef(globalCounter); // Initialize with the global value

  useEffect(() => {
    // Update the global counter whenever the ref changes
    globalCounter = counterRef.current;
  }, [counterRef.current]);

  const increment = () => {
    counterRef.current++;
    //No setState needed, so no re-render
  };

  return (
    <div>
      <p>Counter: {counterRef.current}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Fontos megfontolások: Ez a minta egy globális változót vezet be, ezért legyen rendkívül óvatos a lehetséges mellékhatásokkal és versenyhelyzetekkel, különösen összetett alkalmazásokban. Fontolja meg az alternatív megközelítéseket, például egy context provider használatát, ha az értéket több komponens között ellenőrzöttebb módon kell megosztani.

Összegzés: A useRef erejének felszabadítása

A useRef egy sokoldalú eszköz a Reactben, amely messze túlmutat a DOM-elemek egyszerű elérésén. Megértve, hogy képes változtatható értékeket tárolni újrarenderelés kiváltása nélkül, optimalizálhatja komponenseit, hatékonyabban kezelheti az állapotot, és teljesítményesebb, karbantarthatóbb React alkalmazásokat építhet. Ne felejtse el megfontoltan használni, és mindig vegye figyelembe a teljesítmény és a kód tisztasága közötti lehetséges kompromisszumokat.

Az ebben az útmutatóban leírt minták elsajátításával felkészült lesz arra, hogy kihasználja a useRef teljes potenciálját React projektjeiben, akár egy egyszerű webalkalmazást, akár egy komplex vállalati rendszert épít. Ne felejtse el figyelembe venni a nemzetköziesítést és az akadálymentesítést, amikor globális közönség számára fejleszt!